Edit: It seems as if my checkboxes are not working at all. When a regular checkbox was added to my HTML, it also did not respond to click events.

I am currently working on a dat.gui menu for my THREE.JS project.

Here is my project: https://codesandbox.io/s/ray-test-km2wru?file=/src/World.js:5581-5741

You will see that clicking the checkbox should change the equation for the plane as seen on lines 144. I am noticing that checkbox, when clicked, doesn't uncheck on chrome. However, when tested in firefox, the checkbox will unclick and switch the value of planeSpecs.waveXY to false.

  _createPlane() {
    // Dat.GUI controllers
    let planeSpecs = {
      scaler: 1,
      speed: 1,
      waveXY: true
    };
    let planeMat = new THREE.MeshStandardMaterial({
      color: 0x6d6e6d,
      side: THREE.DoubleSide,
      wireframe: true
    });

    // Creates a single plane with wireframe
    let planeGeo = new THREE.PlaneGeometry(25, 25, 200, 200);
    var plane = new THREE.Mesh(planeGeo, planeMat);
    const planeFolder = this._GUI.addFolder("Plane");
    // These scales work
    planeFolder.add(planeSpecs, "scaler", 1, 10);
    planeFolder.add(planeSpecs, "speed", 0.1, 25);


    // This checkbox code doesn't work:
    const waveXYController = this._GUI
      .add(planeSpecs, "waveXY")
      .listen()
      .onChange((newValue) => {
        console.log(newValue);
      });
    planeFolder.open();


    plane.position.y -= 3;
    plane.rotation.set(Math.PI / 2, 0, 0);

    // Animation for the plane
    plane.tick = (delta, elapsedTime) => {
      const { position } = planeGeo.attributes;
      for (let i = 0; i < position.count; i++) {
        let x = position.getX(i);
        let y = position.getY(i);
        let z = position.getZ(i);

        // Change the equation based on checkbox boolean
        z = planeSpecs.waveXY
          ? Math.sin(
              Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)) +
                elapsedTime * planeSpecs.speed
            ) * planeSpecs.scaler
          : Math.sin(x + elapsedTime * planeSpecs.speed) * planeSpecs.scaler;
        position.setXYZ(i, x, y, z);
      }
      position.needsUpdate = true;
    };
    return plane;
  }

From what I have researched, they way I added the dat.gui seems to be correct: https://www.nowherenearithaca.com/2015/07/datgui-easy-way-to-allow-users-to.html

I did make a forum post on the Three.JS forums, but after figuring out this is a browser issue I made a post here instead: https://discourse.threejs.org/t/dat-gui-checkbox-not-working-on-chrome/37642/2